<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
    body,
    html {
    width: 100%;
    height: 100%;
    margin: 0px
    }
    /* 顶部部分 */
    .top{
        margin-top: 30px;
        margin-left: 20px;
        display: flex;
        flex-direction: row; 
		justify-content:flex-start;
    }
    .logo{
        width: 20px;
        height: 20px;
    }
    .text{
        margin: 0 auto;
        margin-left: 28%;
        font-size: 20px;
        color: #505050;
        font-weight: 900;
    }

    /* 中间部分 */
    .middle{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: center;
        margin-top: 80px;

    }
    .middle>input {
        width: 70%;
        margin-top: 30px;
        border: none;/* 不要边框 */
        border-bottom: 1px solid  rgb(185, 174, 174);
        outline: none;/* 不要选中边框 */
        color: #788299;
        font-size: 20px;
        padding-bottom: 20px;
    }
    /* 登录/忘记密码 */
    .bottom{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: center;
        margin-top: 80px;
    }
    /* 登录 */
    .login{
        height: 40px;
        width: 280px; 
        background-color: #33b17b;
        border-radius: 5px;
        font-size: 17px;
        color: white;
        text-align: center;
        line-height: 40px;
    }
    
    /* 忘记密码 */
    .forget {
        font-size: 15px;
        text-align: center;
        line-height: 40px;
        margin-top: 20px;
        color:#788299
    }


</style>
<body>
    <div>
        <!-- 顶部部分 -->
        <div class="top">
            <img class="logo" src="../jpg/返回.png" >
            <span class="text">手机号登录</span>
        </div>

        <!-- 中间部分 -->
        <div class="middle">
            <input type="text" name="" id="" placeholder="手机：+86">
            <input type="text" name="" id="" placeholder="密码：">
        </div>

        <!-- 登录/忘记密码 -->
        <div  class="bottom">
            <div class="login">
                <span>登录</span>
            </div>
            <div class="forget ">
                <span>忘记密码?</span>
            </div>
        </div>
      
    </div>
</body>
</html>